
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>蚂蚁成绩系统 安装向导</title>
		<link rel="stylesheet" href="__XADMIN__/lib/layui/css/layui.css" />
		<link rel="stylesheet" href="__XADMIN__/pear/css/pear.css" />
		<style>
			.pear-container {
				margin: 10px;
				background-color: whitesmoke;
			}
            .logo {
                width: 60px;
                margin-top: 10px;
                margin-bottom: 10px;
                margin-left: 20px;
            }
            .title {
                font-size: 30px;
                font-weight: 550;
                margin-left: 20px;
                color: #5FB878!important;
                display: inline-block;
                height: 60px;
                line-height: 60px;
                margin-top: 10px;
            }
            .top{
                text-align: center;
                margin-top: 50px;
            }
            .step-item-main {
                padding-left: 38px;
            }
		</style>
	</head>
    <body class="pear-container" background="__XADMIN__/images/background.svg">
        <div class="top">
            <img class="logo" src="__XADMIN__/images/logo.png" />
            <div class="title">蚂蚁成绩管理系统 安装向导</div>
        </div>
        <div class="layui-card-body" style="padding-top: 40px;">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                <div carousel-item>
                    <div >
                     <article class="layui-content" >
                        <div class="layui-col-md4 layui-col-md-offset4">
                        <div style="text-align:center;margin-top: 30px;">
                            <div style="font-size: 14px;color: red; margin-top: 20px;">
                                <h2>安装协议</h2> 
                            </div>
                            <div style="text-align:left; font-size: 14px;color: black; text-indent: 2em">
                                <p>您好！欢迎使用蚂蚁成绩管理系统（以下简称“本软件”）。</p>
                                <p>
                                安装前，请您认真阅览并知晓此说明！</p>
                                <p>
                                1.有关本软件详细使用协议，请访问：www.xxx.com</p>
                                <p>
                                2.有关本软件使用教程说明，请访问：www.xxx.com</p>
                                <p>
                                3.本软件所提供的服务仅供个人用户非商业性测试使用，用户在未经蚂蚁成绩管理系统开发团队事先书面同意的情况下，不得以商业性目的使用蚂蚁成绩管理系统所提供的服务。</p>
                                <p>4.免责声明：蚂蚁成绩管理系统开发团队认为，您在使用蚂蚁成绩管理系统服务前，已经仔细看过本软件所有条款协议并完全同意并遵守，因用户做出不适当的行为而引起法律诉讼，由用户承担全部责任，蚂蚁成绩管理系统不承担任何责任。</p>
                             <div style="text-align:right; font-size: 14px;color: black; text-indent: 2em">
                                <p>
                                蚂蚁成绩管理系统开发团队</p>
                                <p>
                                2020年11月3日</p>
                            </div>
                            </div>

           
                        </div>
                        <div style="text-align: center;margin-top: 50px;">
                            <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">
                                &emsp;同意安装协议&emsp;
                            </button>
                           
                        </div>
                    </div>

                    </article>
                    
                  </div>
                  <div >
                     <article class="layui-content" >
                        <div class="layui-col-md4 layui-col-md-offset4">
                        <div style="text-align:center;margin-top: 30px;">

                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;color: red;">
                              <legend>环境检测</legend>
                            </fieldset>
                             
                            <div class="layui-form">
                              <table class="layui-table">
                                <colgroup>
                                  <col width="200">
                                  <col width="200">
                                  <col width="200">
                                  <col>
                                </colgroup>
                                <thead>
                                  <tr>
                                    <th>项目</th>
                                    <th>所需配置</th>
                                    <th>当前配置</th>                                   
                                  </tr> 
                                </thead>
                                <tbody>
                                <tr>
                                    <td>安装状态</td>
                                    <td>检测是否已安装</td>
                                    <td>{$info['lock']|raw}</td>
                                  </tr>
                                  <tr>
                                    <td>操作系统</td>
                                    <td>不限制</td>
                                    <td>{$info['server_os']}</td>
                                    
                                  </tr>
                                  <tr>
                                    <td>PHP版本</td>
                                    <td>7.0</td>
                                    <td>{$info['phpversion']}</td>
                                  </tr>
                                  <tr>
                                    <td>附件上传</td>
                                    <td>不限制</td>
                                    <td>100M</td>
                                   
                                  </tr>
                                  <tr>
                                    <td>GD库</td>
                                    <td>2.0</td>
                                    <td>2.11</td>
                                   
                                  </tr>
                                  <tr>
                                    <td>Thinkphp版本</td>
                                    <td>6.0</td>
                                    <td>{$info['tp_version']}</td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>


           
                        </div>
                        <div style="text-align: center;margin-top: 50px;">
                                    <button type="button" class="pear-btn pear-btn-success pre">&emsp;上一步&emsp;</button>
                                    <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep1">
                                        &emsp;下一步&emsp;
                                    </button>
                           
                        </div>
                    </div>

                    </article>
                    
                  </div>

                    <div>
                        <form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;" >
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="host" value="127.0.0.1" class="layui-input"  lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库端口</label>
                                <div class="layui-input-block">
                                    <input type="text" name="port"  value="3306" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库账号</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="user" value="root" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库密码</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="pass" value="" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库名称</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="name" value="" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据表前缀</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="prefix" value="cj_" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="pear-btn pear-btn-success pre">&emsp;上一步&emsp;</button>
                                    <button type="reset" class="pear-btn pear-btn-success">
                                        &emsp;重&emsp;置&emsp;
                                    </button>
                                
                                    <button class="pear-btn pear-btn-success" 
                                    lay-submit lay-filter="formStep2">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <form class="layui-form"  action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                            <div style="font-size: 20px;color: red;margin-top: 20px;">
                                <p>注意:导入数据中,过程可能比较慢请耐心等候!</p>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">管理员账号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="admin" value="admin" class="layui-input"  lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">管理员昵称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="nickname" value="超级管理员" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">管理员密码</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="password" value="123456" class="layui-input"  lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="pear-btn pear-btn-success pre">&emsp;上一步&emsp;</button>
                                    <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep3">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <div style="text-align: center;margin-top: 90px;">
                            <div style="font-size: 14px;color: red;margin-top: 20px;">
                                <p>注意:恭喜您安装成功</p>
                            </div>
                        </div>
                        <div style="text-align: center;margin-top: 50px;">
                            <button class="pear-btn pear-btn-success pre">&emsp;上一步&emsp;</button>
                            <button class="pear-btn pear-btn-success complete">&emsp;登录后台&emsp;</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="__XADMIN__/lib/layui/layui.js"></script>
        <script src="__XADMIN__/pear/pear.js"></script>
		<script>
            

			layui.use(['form', 'layer','step'], function() {
				var $ = layui.$,
					form = layui.form,
                    step = layui.step;
        
				step.render({
					elem: '#stepForm',
					filter: 'stepForm',
					width: '100%', //设置容器宽度
					stepWidth: '750px',
					height: '500px',
					stepItems: [
                    {
                        title: '安装协议'
                    },{
                        title: '环境检测'
                    }, {
						title: '数据库'
					}, {
						title: '管理员'
					}, {
						title: '完成'
					}]
				});
                form.on('submit(formStep)', function() {                   
                    step.next('#stepForm');
                    return false;
                });
                form.on('submit(formStep1)', function(data) {
                    console.log(data);
                    //admin = data.field;
                    step.next('#stepForm');
                    return false;
                });
                //数据库配置文件写入
                form.on('submit(formStep2)', function(data) {
                    var name = data.field.name;
                    var host = data.field.host;
                    var user = data.field.user;
                    var pass = data.field.pass;
                    var port = data.field.port;
                    var prefix = data.field.prefix;
                    $.ajax({
                        type: 'post',
                        url: "{:url('step2')}",
                        data: {host: host, port: port, user: user, pass:pass, name: name,prefix: prefix},
                        success: function (res) {
                            // str=JSON.stringify(res);
                            // alert(str);
                            if (res.code == 200) {
                                layer.alert(res.msg, {icon: 6}, function(index){
                                 //do something
                                  step.next('#stepForm');
                                  layer.close(index);                                 
                                });
                                          
                            } else {
                                layer.alert(res.msg, {icon: 5}, function(index){
                                //do something
                                   //刷新页面
                                  location.reload();
                                  layer.close(index);
                                }); 

                            }
                        }
                    }); 
                    return false;
                });
                //导入数据库
				form.on('submit(formStep3)', function(data) {
                console.log(data);
                //发异步，把数据提交给php
                var admin = data.field.admin;
                var nickname = data.field.nickname;
                var password = data.field.password;

                $.ajax({
                    type: 'post',
                    url: "{:url('step3')}",
                    data: {admin: admin, nickname: nickname, password: password},
                    success: function (res) {
                        // str=JSON.stringify(res);
                        // alert(str);
                        
                        if (res.code == 200) {
                            layer.alert(res.msg, {icon: 6}, function(index){
                             //do something
                              step.next('#stepForm');
                              layer.close(index);
                            });
                                      
                        } else {
                            layer.alert(res.msg, {icon: 5}, function(index){
                              layer.close(index);
                              return false;
                            }); 

                        }
                    }
                });                
                return false;
				});

                

				$('.pre').click(function() {
					step.pre('#stepForm');
					return false;
				});

				$('.next').click(function() {
					step.next('#stepForm');
				    return false;
				});
                $('.complete').click( function(){
                   window.location.href="./index.php";

                });

                $('.go').click(function() {
                    layer.load();
                    $.ajax({
                        type: "POST",
                        data: Object.assign(sql, admin),
                        success: function (res) {
                            layer.closeAll('loading');
                            //验证通过
                            if (res.code==200){
                                layer.msg(res.msg,{icon:1,time:1500});
                                location.reload();
                            } else {
                                layer.msg(res.msg,{icon:2,time:1500})
                            }
                        }
                    });
                    return false;
				});
			})
		</script>
	</body>
</html>
